import Icon from '@/components/Icon';
import { ReactNode } from 'react';
import styles from './index.module.scss';
import { useHistory } from 'react-router-dom';

type NavBarProps = {
  right?: ReactNode;
  onBack?: () => void;
  children?: ReactNode;
};

export default function NavBar({ right, onBack, children }: NavBarProps) {
  const history = useHistory();

  const handleBack = () => {
    if (onBack) return onBack();
    history.goBack();
  };
  return (
    <div className={styles.root}>
      <div className="main">
        <div className="left" onClick={handleBack}>
          <Icon type="iconfanhui" />
        </div>
        <div className="title">{children}</div>
        <div className="right">{right}</div>
      </div>
    </div>
  );
}
